<template>
    <div class='container'>
        <pageTitle titleName="税务"></pageTitle>
        <div class="chartContainer" ref="chart"> </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import pageTitle from "./pageTitle.vue"

export default {
    components: { pageTitle },
    data() {
        return {
            chartInstance: null,
            swData: [],
        };
    },
    props: {
        fieldTypeObj: {
            type: Object,
            default: () => {
                return {
                    key: 'smIndexUnit',
                    value: 'smIndexValue',
                }
            }
        }
    },
    computed: {},
    watch: {
        fieldTypeObj: {
            handler(newVal, oldVal) {
                this.initData(this.swData)
            },
            deep: true
        }
    },
    created() {

    },
    mounted() {
        // this.initChart([]);

    },
    methods: {
        initData(data = []) {
            if (data.length === 0) return
            this.swData = data
            let dataArr = []
            let totalNum = 0
            data.forEach(item => {
                let obj = {}
                obj.name = item.indexName || '-'
                obj.value = Number(item?.[this.fieldTypeObj.value] || 0)
                dataArr.push(obj)
                totalNum += obj.value
            })
            this.initChart(dataArr, totalNum);
        },
        initChart(dataArr = [], totalNum = 0) {
            if (this.chartInstance) {
                this.chartInstance.dispose();
            }
            this.chartInstance = echarts.init(this.$refs.chart);
            // let dataArr = [
            //     { value: 140, name: '视频监控', },
            //     { value: 200, name: '新风送风', },
            //     { value: 340, name: '空调设备', },
            //     { value: 70, name: '人脸设备', },
            //     { value: 56, name: '给排水设备', },
            // ]

            let option = {
                // backgroundColor: '#022457',

                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        const total = params.value;
                        const percent = params.percent;
                        return `
                <div style="font-weight:bold">${params.name}</div>
                <div>数值: ${total}</div>
                <div>占比: ${percent}%</div>
            `;
                    },
                    backgroundColor: 'rgba(0,0,0,0.7)',
                    borderColor: '#3877f0',
                    borderWidth: 1,
                    textStyle: {
                        color: '#fff',
                        fontSize: 12
                    },
                    position: function (point, params, dom, rect, size) {
                        // 控制tooltip显示位置
                        const x = point[0];
                        const y = point[1];
                        const viewWidth = size.viewSize[0];
                        const viewHeight = size.viewSize[1];

                        if (x > viewWidth / 2) {
                            return [x - size.contentSize[0] - 10, y - size.contentSize[1] / 2];
                        } else {
                            return [x + 10, y - size.contentSize[1] / 2];
                        }
                    }
                },
                title: {
                    zlevel: 0,
                    text: totalNum,
                    subtext: "税务总计",
                    top: "40%",
                    left: "24%",
                    textAlign: "center",
                    textStyle: {
                        color: "#fff",
                        fontSize: 20,
                    },
                    subtextStyle: {
                        fontSize: 14,
                        color: "#fff",
                    },
                },
                legend: {
                    orient: "vertical",
                    top: '20%',
                    right: '10%',
                    itemGap: 12,
                    itemWidth: 8,
                    itemHeight: 8,
                    // 使用回调函数
                    formatter: function (name) {
                        var data = option.series[4].data;
                        var total = 0;
                        var tarValue;
                        for (var i = 0, l = data.length; i < l; i++) {
                            total += data[i]?.value || 0;
                            if (data[i].name == name) {
                                tarValue = data[i].value;
                            }
                        }
                        var p = ((tarValue / total) * 100).toFixed(2);
                        return '{a|' + name + '}' + '     {b|' + p + "% }";
                    },
                    textStyle: {
                        fontSize: 12,
                        color: '#999',
                        rich: {
                            a: {
                                // type: 'linear',
                                // steps: ['#FFF', '#53B5FD'],
                                // backgroundColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                //     { offset: 0, color: '#FFF' },
                                //     { offset: 1, color: '#53B5FD' }
                                // ]), 
                                color: "#fff",
                                width: 60,
                                // height: 20 // 需要指定高度

                            },
                            b: {
                                color: 'linear-gradient(left, #00f, #f00)', // 从左到右的渐变，从蓝色到红色
                                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                //     {
                                //         offset: 0, color: "#fff" // 0% 处的颜色  
                                //     }, {
                                //         offset: 1, color: "#53B5FD" // 100% 处的颜色
                                //     },
                                // ]),
                                color: "rgba(60, 198, 253, 1)",
                                width: 30
                            }
                        }
                    }
                },
                color: [
                    'rgba(40, 218, 239, 1)',
                    'rgba(115, 114, 88, 1)',
                    'rgba(240, 89, 39, 1)',
                    'rgba(225, 114, 108, 1)',
                    'rgba(251, 95, 179, 1)'],
                series: [
                    {
                        type: "pie",
                        name: "外层细圆环",
                        radius: ["84%", "85%"],
                        center: ['25%', '50%'],
                        hoverAnimation: true,
                        startAngle: 0,
                        clockWise: false,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "rgba(3, 15, 8, 0.5)" // 0% 处的颜色
                                    }, {
                                        offset: 0.5,
                                        color: "#00C2FF" // 100% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(3, 15, 8, 0.5)" // 0% 处的颜色
                                    }
                                ]),

                                // color: "rgba(129, 197, 200, 0.5)"
                            }
                        },
                        label: {
                            show: false
                        },
                        data: [100]
                    },
                    {
                        // 锯齿部分
                        type: "gauge",
                        radius: "46%",
                        clockwise: true,
                        startAngle: "90",
                        center: ['25%', '50%'],
                        endAngle: "-269.9999",
                        splitNumber: 12,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                width: 0,
                                color: [[1, 'rgba(129, 197, 200, 0.5)']], // 锯齿数据写在这里
                            },
                        },
                        axisTick: {
                            distance: -20,
                            length: 2,
                            splitNumber: 8,
                            lineStyle: {
                                width: 2,
                                color: "auto",
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        anchor: {
                            show: false,
                        },
                        title: {
                            show: false,
                        },
                        detail: {
                            show: false,
                        },
                    },

                    //环形
                    {
                        name: '3',
                        type: 'pie',
                        clockwise: false,
                        startAngle: 0,
                        radius: ['63%', '64%'],
                        center: ['25%', '50%'],
                        hoverAnimation: true,
                        label: {
                            normal: {
                                show: false,
                            },
                            emphasis: {
                                show: false,
                            },
                        },
                        zlevel: 1,
                        labelLine: {
                            normal: {
                                show: false,
                            },
                        },
                        data: dataArr,
                    },
                    {
                        name: '2',
                        type: 'pie',
                        clockwise: false,
                        startAngle: 0,
                        radius: ['52%', '61%'],
                        center: ['25%', '50%'],
                        hoverAnimation: true,
                        label: {
                            normal: {
                                show: false,
                            },
                            emphasis: {
                                show: false,
                            },
                        },
                        zlevel: 1,
                        labelLine: {
                            normal: {
                                show: false,
                            },
                        },
                        data: dataArr,
                    },
                    {
                        name: '1',
                        type: 'pie',
                        hoverAnimation: true, // 启用悬浮动画
                        clockwise: false,
                        startAngle: 0,
                        radius: ['45%', '61%'],
                        center: ['25%', '50%'],
                        label: {
                            normal: {
                                show: false,
                            },
                            emphasis: {
                                show: false,
                            },
                        },
                        zlevel: 1,
                        labelLine: {
                            normal: {
                                show: false,
                            },
                        },
                        data: dataArr,
                        itemStyle: {
                            normal: {
                                color: function (colors) {
                                    var colorList = [
                                        'rgba(40, 218, 239, 0.6)',
                                        'rgba(115, 114, 88, 0.6)',
                                        'rgba(240, 89, 39, 0.6)',
                                        'rgba(115, 114, 88, 0.6)',
                                        'rgba(251, 95, 179,0.6)'
                                    ];
                                    return colorList[colors.dataIndex];
                                }
                            },
                        },

                    },

                ],
            };

            this.chartInstance.setOption(option, true);
            // 添加点击事件
            this.chartInstance.on('click', (params) => {

            });
            window.addEventListener('resize', () => {
                if (this.chartInstance) this.chartInstance.resize()
            })
        }
    },
    beforeDestroy() {
        if (this.chartInstance) {
            this.chartInstance.dispose();
        }
    },
    activated() { },
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.container {
    position: relative;
    height: 100%;

    .chartContainer {
        width: 100%;
        height: calc(100% - 5vh)
    }
}
</style>